<template>
  <div class="w-100 h-100 flex-vertical">
    <Back class="flex-header mt-5" />
    <div class="flex-content px-4 pb-4 no-scroll">
      <div class="flex-center-center">
        <div class="avatar-box flex-center-center p-2-5">
          <img class="w-100 h-100" src="@img/my/avatar.png" alt="" />
        </div>
      </div>
      <div class="color-gray text-md text-center my-3">猫咪详情</div>
      <div class="bg-5 round-md">
        <div class="text-center color-active2 text-md py-3">平均摄入营养</div>
        <div class="flex-item text-center pb-3" v-for="(item, index) in nutritionList" :key="index">
          <div class="flex-content w-33">{{ item.name }}</div>
          <div class="flex-content w-33">{{ item.value1 }}g</div>
          <div class="flex-content w-33">{{ item.value2 }}%</div>
        </div>
      </div>
      <div class="d-flex flex-wrap justify-content-between">
        <div v-for="(item, index) in tabList" :key="index" class="w-40 mt-4">
          <div class="w-100 text-title text-center">
            <div class="text-md text-center color-gray mb-2">{{ item.name }}</div>
            <div class="w-100 tab-box round-md bg-5 p-3 flex-center-center">{{ item.des }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Back from '@components/Back.vue';
import { ref } from 'vue';

const nutritionList = ref([
  {
    name: '卡路里',
    value1: 143,
    value2: 15
  },
  {
    name: '碳水化合物',
    value1: 26,
    value2: 18
  },
  {
    name: '蛋白质',
    value1: 0,
    value2: 0
  },
  {
    name: '脂肪',
    value1: 3.5,
    value2: 2.4
  }
]);

const tabList = ref([
  { name: '疫苗预约', des: '三天后接种' },
  { name: '生日提醒', des: '倒计时56天' },
  { name: '锻炼里程', des: '今日锻炼5公里' },
  { name: '生病史', des: '猫咪很健康' }
]);
</script>

<style lang="less" scoped>
@import '~@style/variable.less';

.avatar-box {
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  border: 0.3rem solid @gray;
}

.tab-box {
  height: 8rem;
}
</style>
